<template>
	<view class="home">
		<view class="card1 bg-white">
			<view class="search-box flex-between">
				<view class="search flex">
					<icon type="search" size=18></icon>
					<input type="text" placeholder="搜索交易员与动态">
					<view class="btn flex-center">搜索</view>
				</view>
				<view class="dot"></view>
				<image src="/static/message.png" mode="widthFix" @click="goPage('/pages/index/message')"></image>
			</view>
			
			<view class="tabs flex-between">
				<navigator url="/pages/signal/index" hover-class="none" open-type="switchTab" class="item flex-center-column">
					<view class="flex-center">

					</view>
					<text>交易员</text>
				</navigator>
				<navigator url="/pages/forum/index" hover-class="none" open-type="switchTab" class="item flex-center-column">
					<view class="flex-center">

					</view>
					<text>社区动态</text>
				</navigator>
				<view class="item flex-center-column" @click="goPage('/pages/index/plat')">
					<view class="flex-center">

					</view>
					<text>交易平台</text>
				</view>
				<view class="item flex-center-column">
					<view class="flex-center">

					</view>
					<text>买/卖币</text>
				</view>
			</view>
		</view>
		<view class="card2">
			<view class="title flex">
				<view class="h3">今日为你推荐</view>
				<text>04-21 星期三</text>
			</view>
			<view class="ul">
				<view class="li">美CFTC前主席加入BlockFi董事会</view>
				<view class="li">美CFTC前主席加入BlockFi董事会</view>
				<view class="li">美CFTC前主席加入BlockFi董事会</view>
			</view>
		</view>
		<view class="card3">
			<view class="title flex">
				<view class="h3">交易英雄榜</view>
			</view>
			<view class="box">
				<view class="card" v-for="(item,index) in 3" :key="index">
					<view class="list flex-between" v-for="(v,k) in 2" :key="k">
						<view class="left flex">
							<view class="avatar">
								<image src="/static/1.jpg" mode="aspectFill"></image>
								<view class="num flex-center">1</view>
							</view>
							<view class="user">
								<view class="h4">币枷锁</view>
								<view class="p">GOEX 交易员</view>
							</view>
						</view>
						<view class="right flex">
							<view class="money">
								<view class="h4">2455454.4567</view>
								<text class="p">收益(USDT)</text>
							</view>
							<view class="num">
								<view class="h4">153</view>
								<text class="p">跟随/人</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="card4">
			<swiper class="swiper" :indicator-dots="true" indicator-active-color="#fff" indicator-color="#aaa" :autoplay="true" :circular="true">
				<swiper-item v-for="(item,index) in 3" :key="index">
					<image src="/static/1.jpg" mode="aspectFill"></image>
				</swiper-item>

			</swiper>
		</view>
		<view class="card5">
			<view class="title flex-between">
				<view class="h3">社区热门</view>
				<navigator url="/pages/forum/index" open-type="switchTab" hover-class="none" class="flex">
					更多动态
					<image src="/static/arrow.png" mode="widthFix"></image>
				 </navigator>
			</view>
			<block v-for="(item,index) in 3" :key="index">
				<view class="card">
					<view class="top flex-between">
						<view class="left flex">
							<image src="/static/1.jpg" mode="aspectFill"></image>
							<view class="user">
								<view class="name">比特领航员</view>
								<view class="time">2021-04-21 14:31:01</view>
							</view>
						</view>
						<view class="right flex-center" :class="{active:index % 2 == 0}">关注</view>
					</view>
					<view class="content">就是立刻搭街坊是可见的就开始基地上空的飞机加快速度JFK就是打开飞机喀什地方就是看到</view>
					<view class="imgs flex">
						<block v-for="(v,k) in index+1 " :key="k">
							<image src="/static/1.jpg" mode="aspectFill"></image>
						</block>
						
					</view>
					<view class="bottom flex-between">
						<view class="flex-center">
							<image src="/static/share.png" mode="widthFix"></image>
							分享
						</view>
						<view class="flex-center">
							<image src="/static/comment.png" mode="widthFix"></image>
							评论
						</view>
						<view class="flex-center">
							<image src="/static/heart.png" mode="widthFix"></image>
							99
						</view>
					</view>
				</view>
			</block>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			};
		},
		methods:{
			goPage(url){
				uni.navigateTo({
					url:url
				})
			}
		}
	}
</script>

<style lang="less">
	.home {
		.bg-white {
			background: white;
		}
		@color:#d4237a;
		.card1 {
			padding: 10rpx 30rpx 0;
			.search-box{
				position: relative;
				.dot{
					position: absolute;
					right:0;
					top: 10rpx;
					width: 16rpx;
					height: 16rpx;
					border-radius: 50%;
					background:@color ;
					animation: twinkle 2s  infinite;
				}
				image{
					width: 46rpx;
					height: auto;
				}
			}
			.search {
				height: 60rpx;
				background: #e6e6e6;
				border-radius: 30rpx;
				padding-left: 30rpx;

				input {
					width: 410rpx;
					padding: 0 20rpx;
					font-size: 30rpx;
				}

				.btn {
					background: #ff006a;
					color: white;
					height: 52rpx;
					padding: 0 25rpx;
					font-size: 26rpx;
					border-radius: 26rpx;
				}
			}

			.tabs {
				padding: 30rpx 20rpx;

				.item {
					view {
						width: 120rpx;
						height: 80rpx;
						background: orange;
						border-radius: 40rpx;
					}

					text {
						font-size: 26rpx;
						margin-top: 15rpx;
					}
				}
			}
		}

		.title {
			line-height: 2.5;

			.h3 {
				font-size: 32rpx;
				font-weight: bold;
			}

			text {
				font-size: 26rpx;
				color: #666;
				margin-left: 30rpx;
			}
			navigator{
				font-size: 26rpx;
				color:#666;
				image{
					width: 24rpx;
					height: auto;
				}
			}
		}

		.card2 {
			padding: 0 30rpx;

			.ul {
				background: white;
				padding: 24rpx;
				border-radius: 10rpx;

				.li {
					font-size: 24rpx;
					line-height: 1.7;
				}
			}
		}

		.card3 {
			.title {
				padding-left: 30rpx;
			}

			.box {
				width: 100vw;
				overflow-x: scroll;
				white-space: nowrap;

				.card {
					display: inline-block;
					background: white;
					padding: 20rpx;
					border-radius: 10rpx;
					margin-left: 30rpx;
					width: 600rpx;

					.list {
						background: #eee;
						padding: 20rpx;
						border-radius: 10rpx;

						.avatar {
							width: 100rpx;
							height: 100rpx;
							position: relative;
							margin-right: 10rpx;

							image {
								width: 100%;
								height: 100%;
								border-radius: 50%;
							}

							.num {
								position: absolute;
								bottom: 0;
								right: 0;
								width: 40rpx;
								height: 40rpx;
								color: white;
								background: #ccc;
								border-radius: 50%;
							}
						}

						.h4 {
							font-size: 26rpx;
							font-weight: bold;

						}

						.p {
							font-size: 24rpx;
							color: #999;
						}

						.left {
							.h4 {
								margin-bottom: 8rpx;
							}
						}

						.money {
							margin-right: 10rpx;
						}

						&:nth-child(1) {
							margin-bottom: 20rpx;

							.avatar {
								.num {
									background: orange;
								}
							}
						}
					}

					&:last-child {
						margin-right: 30rpx;
					}
				}
			}
		}
		.card4{
			padding: 24rpx 30rpx 20rpx;
			swiper{
				height: 220rpx;
			}
			image{
				width: 100%;
				height: 100%;
				border-radius: 15rpx;
			}
		}
		.card5{
			padding: 0 30rpx;
			.card{
				background: white;
				padding: 20rpx;
				border-radius: 10rpx;
				margin-bottom: 30rpx;
				.top{
					.left{
						image{
							width: 80rpx;
							height: 80rpx;
							border-radius: 50%;
							margin-right: 20rpx;
						}
						.name{
							font-size: 28rpx;
						}
						.time{
							font-size: 20rpx;
							color:#999;
						}
					}
					.right{
						font-size: 26rpx;
						color:#f0f;
						border:1px solid #f0f;
						height: 50rpx;
						padding: 0 25rpx;
						border-radius: 25rpx;
						&.active{
							background: #f0f;
							color:white;
						}
					}
				}
				.content{
					font-size: 26rpx;
					padding: 15rpx 0;
					line-height: 1.5;
				}
				.imgs{
					image{
						width: 200rpx;
						height: 200rpx;
						margin-right: 22rpx;
						border-radius: 10rpx;
						&:last-child{
							margin-right: 0;
							
						}
					}
				}
				.bottom{
					margin-top: 20rpx;
					view{
						width: 25%;
					}
					image{
						width: 36rpx;
						height: auto;
						margin-right: 10rpx;
					}
				}
			}
		}
	}
	// 闪烁
	@keyframes twinkle{
	            /* 0%表示动画开始的关键帧 */
	            0%{
	                opacity: 1;
	            }   
	            50%{
	               opacity: 0;
	            } 
	            100%{
	                opacity: 1;
	            }
	        }
</style>
